<template>
  <div class="allProject">
    <div class="title">
      <div class="search">
        <div>
          <el-input class="input" size="medium" placeholder="请输入内容" v-model="params.keyword"></el-input>
          <el-button @click='searchKeyWord()' type="primary">搜索</el-button>
        </div>
        <div>
          <el-button @click="addProject" type="primary">添加项目</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <table>
        <thead>
          <tr>
            <th>项目名称</th>
            <th>项目封面</th>
            <th>发行商</th>
            <th>单份价格</th>
            <th>筹集资金</th>
            <th>剩余份数</th>
            <th>融资进度</th>
            <th>权益发放</th>
          </tr>
        </thead>

        <tbody v-for='(item,index) in dataList' :key='index'>
          <tr class="sep-row">
            <td colspan="5"></td>
          </tr>
          <tr class="tr-th">
            <td colspan="10">
              <div class="thead">
                <div>
                  <span>创建时间：
                    <b>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</b>
                  </span>
                  <span>项目编号：
                    <b>{{item.movieId}}</b>
                  </span>
                </div>
                <div class="selectOperation">
                  <div v-show="item.checking && item.failedReason === ''">
                    <span @click="goAdopt(item)">通过</span>
                    <span @click="refuse(item)">拒绝</span>
                  </div>
                  <div>
                    <el-button @click="openExamine(item)" type="primary">审核记录</el-button>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p>{{item.title}}</p>
                <p>
                  <a @click="openDetails(item)" href="javascript:;">查看详情</a>
                  <a  v-show="!item.checking" @click='openEdit(item)' href="javascript:;">编辑</a>
                </p>
              </div>
            </td>

            <td>
              <div class="information">
                <div>
                  <img :src="item.coverImage" alt>
                </div>
              </div>
            </td>
            <td class="receipt">
              <h3>{{getpublisher(item)}}</h3>
              <p>{{getPublisherStatus(item)}}</p>
            </td>
            <td>
              <h3>{{getShowDeciemal(item.priceOfUnit)}}元
                <b>(每人限购{{item.userLimit}}份)</b>
              </h3>
              <a @click="openHistoricalPrice(item)" href="javascript:;">历史价格</a>
            </td>
            <td>
              <h3>{{parseFloat(getShowDeciemal(item.totalOfMoney)).toLocaleString()}}元</h3>
              <p>剩余:{{surplursfunds(item)}}元</p>
            </td>
            <td>
              <h3>{{getCopies(item)}}份
              </h3>
              <a @click="purchase(item)" href="javascript:;">购买记录</a>
            </td>
            <td>
              <h3>{{getStatus(item)}}</h3>
              <a @click="openChangeRange(item)" href="javascript:;">更改记录</a>
            </td>
            <td>
              <a 
                v-if="item.status.value === 'bonus' || item.status.value === 'pause'" 
                href="javascript:;" @click="openInterests(item)">权益发放</a>
                <div v-if='item.profitChecking'>
                  <el-button @click='sureinterstJsuance(item.movieId)' type="text">通过</el-button>
                  <el-button @click='refuseinterstJsuance(item.movieId)' type="text" class='refuseBtn'>拒绝</el-button>
                </div>
                <p class='grantingMoney'> 
                  <span class='propitRed' v-if="item.profit>=0">+{{item.profit}}</span>
                  <span v-if='item.profit>=0'>/元</span>

                  <span class='propitBule' v-if="item.profit && item.profit < 0">{{item.profit}}</span>
                  <span v-if='item.profit && item.profit < 0'>/元</span>
                </p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <el-pagination
      class="pagination"
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>

    <!-- 历史价格 -->
    <priceList ref="priceList"></priceList>
    <!-- 购买记录 -->
    <purchase ref="purchase"></purchase>

    <!-- 融资更改记录 -->
    <changeRange ref="changeRange"></changeRange>

    <!-- 审核记录 -->
    <examine ref="examine"></examine>

    <!-- 发放权益 -->
    <interests ref="interests"></interests>
    <!-- 权益发放审核 -->
    <interestssJsuance ref='interestssJsuance'></interestssJsuance>


    <el-dialog :visible.sync="aportDialogVisible" width="20%">
      <span>确认通过审核吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="sure()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="refuseDialogVisible" width="20%">
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入拒绝原因"
        v-model="checkParams.failedReason"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelrefuse()">取 消</el-button>
        <el-button type="primary" @click="surerefuse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from '@/utils';
import numberFormat from '@/api/numberFormat';
import { getToken } from "@/utils/auth";
import priceList from "./components/priceList";
import purchase from "./components/purchase";
import changeRange from "./components/changeRange";
import examine from "./components/examine";
import interests from "./components/interests";
import interestssJsuance from "./components/interestssJsuance";

export default {
  name: "hasBeenIssued",
  data() {
    return {
      aportDialogVisible: false,
      refuseDialogVisible: false,
      total:0,
      users:[],
      params: {
        type: "",
        status: "finish",  //权益已发放
        releaseStatus: "",
        checking:0,
        keyword: "",
        start: 0,
        limit: 10,
        token: getToken()
      },
      dataList:[],
      checkParams:{
        movieId:'',
        success:'',
        failedReason:'',
        token:getToken()
      }
    };
  },
  methods: {
    sureinterstJsuance(id){
      this.$refs.interestssJsuance.getAdopt(id);
    },
    refuseinterstJsuance(id){
      this.$refs.interestssJsuance.refuseText(id);
    },
    getShowDeciemal(money){
      return numberFormat.showDecimal(money);
    },
    //搜索
    searchKeyWord(){
      if(this.params.keyword === ''){
        return this.$message({
                message: '查询内容不能为空',
                type: 'error'
              })
      }
      this.getList();
    },
    //影片管理列表
    getList() {
      ajax('moviesForManager', this.params).then((res) => {
        if(res.status === 200){
            this.total = res.data.total;   //总数
            this.dataList = res.data.data;   //停售的数据
            //发行商
            this.users = res.data.users;
        }  
      });
    },
    //融资进度
    getStatus(item){
      if(item.statusChanges){
        return item.statusChanges[item.statusChanges.length-1].after.text;
      }else{
        return '--';
      }
    },
    //发行商名称
    getpublisher(item){
      return this.users[item.userId].name;
    },
    //发行商的类型添加
    getPublisherStatus(item){
      if(this.users[item.userId].role.admin){
        return '系统后台添加';
      }

      if(this.users[item.userId].role.dealer){
        return '经销商添加';
      }

      if(this.users[item.userId].role.issue){
        return '发行商添加';
      }

      if(this.users[item.userId].role.market){
        return '市场人员添加';
      }
    },
    //剩余份数
    getCopies(item){
      return (item.totalOfMoney-item.salesOfMoney)/item.priceOfUnit;
    },

    //剩余资金
    surplursfunds(item){
      return parseFloat(this.getShowDeciemal(item.totalOfMoney-item.salesOfMoney)).toLocaleString();
    },
    handleCurrentChange(val){
        this.params.start = (val - 1) * this.params.limit;
        this.getList();
    },
    addProject() {
      this.$router.push({ name: "addProjectIndex" });
    },
    //详情
    openDetails(item) {
      this.$router.push({ name: "details",params:{movieId:item.movieId}});
    },

    //编辑详情
    openEdit(item){
      this.$router.push({ name: "edit",params:{movieId:item.movieId}});
    },

    //历史价格
    openHistoricalPrice(item) {
      this.$refs.priceList.openPrice(item.priceChanges);
    },
    //购买价格
    purchase(item) {
      this.$refs.purchase.openPurchaseStatus(item.movieId,getToken());
    },

    //更改记录
    openChangeRange(item) {
      this.$refs.changeRange.openChangeRange(item.statusChanges);
    },

    //审核记录
    openExamine(item) {
      this.$refs.examine.openPrice(item.checkChanges);
    },
    //发放权益
    openInterests(item) {
      this.$refs.interests.opendialogVisible(item);
    },
    //通过
    goAdopt(item) {
        this.aportDialogVisible = true;
        this.checkParams.movieId = item.movieId;
        this.checkParams.success = true;
    },
    cancel() {
      this.aportDialogVisible = false;
    },
    sure() {
      
      ajax('movieCheckForManager',this.checkParams).then((res) => {
        if(res.data.status){
          
          this.$message({
            message: '通过成功!',
            type: 'success'
          });
          this.aportDialogVisible = false;
          this.getList();
        }
      });
    },

    //拒绝
    refuse(item) {
      this.refuseDialogVisible = true;
      this.checkParams.movieId = item.movieId;
      this.checkParams.success = false;
    },
    cancelrefuse() {
      this.refuseDialogVisible = false;
    },

    surerefuse() {
      if(this.checkParams.failedReason === ''){
        return this.$message({
            message: '拒绝原因不能为空',
            type: 'success'
          });
      }
      ajax('movieCheckForManager',this.checkParams).then((res) => {
        if(res.data.status){
          this.$message({
            message: '拒绝成功!',
            type: 'success'
          });
          this.refuseDialogVisible = false;
          this.getList();
        }
      });
    }
  },
  mounted(){
      this.getList();
  },
  components: {
    purchase,
    priceList,
    changeRange,
    examine,
    interests,
    interestssJsuance
  }
};
</script>


<style lang="less" scoped>
.allProject {
  padding: 1rem;
  .title {
    display: flex;
    width: 100%;
    div:first-child {
      margin-right: 1rem;
    }
    .search {
      display: flex;
      div:first-child {
        display: flex;
      }
      .input {
        margin: 0 0.4rem 0 0.3rem;
      }
    }
  }
  table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    thead {
      th {
        /* height: 32px;
                line-height: 32px; */
        text-align: left;
        background: #f8f8f8;
        color: #666;
        font-weight: 400;
        padding: 1rem;
        font-size: 15px;
      }
      th:first-child {
        width: 10%;
      }
      th:nth-child(2) {
        width: 8%;
      }
      th:nth-child(3) {
        width: 21%;
      }
    }
    tbody {
      .information {
        div {
          width: 90px;
          height: 133px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      tr:nth-child(2){
        td{
          padding: .5rem 1rem;
          border: 1px solid #e6e6e6;
        }
      }
      tr:nth-child(3) {
        td {
          padding: 1rem;
          border: 1px solid #e6e6e6;
        }
      }

      tr:nth-child(3) {
        td:first-child {
          p:last-child {
            margin: 0;
            display: inline-block;
            color: #36aaf5;
            text-decoration: underline;
            a:last-child {
              margin-left: 1rem;
            }
          }
          p {
            margin: 0.8rem 0 0.3rem 0;
            font-size: 15px;
          }
        }
        .receipt {
          ul {
            line-height: 1.8rem;
          }
          h3 {
            font-weight: 400;
            color: rgba(16, 16, 16, 1);
            font-size: 15px;
            margin: 0;
          }
          p {
            color: rgba(170, 170, 170, 1);
            font-size: 14px;
            margin: 0.3rem 0 0 0;
          }
        }
        td:nth-child(4) {
          h3 {
            font-weight: 400;
            color: rgba(255, 18, 104, 1);
            font-size: 15px;
            margin: 0 0 0.3rem 0;
            b {
              color: #aaa;
              font-weight: 400;
            }
          }

          a {
            color: rgba(4, 146, 251, 1);
            font-size: 14px;
            text-decoration: underline;
          }
        }
        td:nth-child(5) {
          h3 {
            font-weight: 400;
            color: rgba(255, 18, 104, 1);
            font-size: 15px;
            margin: 0 0 0.3rem 0;
          }
          p {
            font-size: 14px;
            color: #aaa;
            margin: 0;
          }
        }
        td:nth-child(6) {
          h3 {
            font-weight: 400;
            color: #aaa;
            font-size: 15px;
            margin: 0 0 0.3rem 0;
            b {
              color: rgba(255, 18, 104, 1);
              font-weight: 400;
            }
          }

          a {
            color: rgba(4, 146, 251, 1);
            font-size: 14px;
            text-decoration: underline;
          }
        }

        td:nth-child(7) {
          position: relative;
          h3 {
            font-weight: 400;
            color: #101010;
            font-size: 15px;
            margin: 0 0 0.3rem 0;
            cursor: pointer;
            .icon-right{
                margin-right: -2.2rem;
                color: red;
                font-weight: bold;
                font-size: .9rem;
                display: inline-block;
            }
          }
          a {
            color: #0492fb;
            font-size: 14px;
            text-decoration: underline;
          }
          .changeRecord{
              position: absolute;
              width: 18rem;
              height: 9rem;
              padding: 1.8rem;
              left: -14rem;
              background: #fff;
              box-shadow: 0px 1px 14px #ddd;
              .el-checkbox{
                .el-checkbox__label{
                    font-size: 16px;
                }
              }
              p{
                margin: 2rem 0 0 0;
                text-align: right;
              }
          }
        }
        td {
          a {
            color: #0492fb;
            font-size: 14px;
            text-decoration: underline;
          }
        }
      }

      .sep-row {
        height: 20px;
      }
      .thead {
        display: flex;
        justify-content: space-between;
        div {
          line-height: 36px;
          font-size: 14px;
          display: flex;
          div:first-child {
            margin-right: 2rem;
          }
        }
        span {
          color: #36aaf5;
        }
        span:last-child {
          margin-left: 2rem;
        }
        b {
          font-weight: 400;
          color: #7d7d7d;
        }
      }
      .selectOperation {
        /* width: 7rem; */
        cursor: pointer;
        div:first-child{
          span:last-child{
            color: red;
          }
        }
      }
    }
  }
  .pagination{
    text-align: right;
    margin: 1rem 0;
  }
  .refuseBtn{
    color: red;
    margin-left: 1rem;
  }
  .grantingMoney{
    .propitRed{
      color: red;
    }
    .propitBule{
      color: #409eff;
    }
    span{
      color: #aaa;
    }
  } 
  

}
</style>
